//? 创建响应式
function reactive(target = {}) {
    if (typeof target !== 'object' || target == null) {
        //? 不是对象或数组，则返回
        return target
    }

    //? 代理配置
    const proxyConf = {
        get(target, key, receiver) {
            //? 只处理本身（非原型的）属性 返回一个由目标对象自身的属性键组成的数组
            const ownKeys = Reflect.ownKeys(target)
            //? 所以这里调用数组方法
            if (ownKeys.includes(key)) {
                console.log('get', key) //? 监听
            }
            //? Reflect.get从对象中读取key的value
            const result = Reflect.get(target, key, receiver)

            //? 深度监听
            //? 性能如何提升的？获取到哪一层才触发响应式get，不是一次性递归
            return reactive(result)
        },
        set(target, key, val, receiver) {
            //? 重复的数据，不处理
            if (val === target[key]) {
                return true
            }

            const ownKeys = Reflect.ownKeys(target)
            if (ownKeys.includes(key)) {
                console.log('已有的 key', key)
            } else {
                console.log('新增的 key', key)
            }
            //? 新增或修改
            const result = Reflect.set(target, key, val, receiver)
            console.log('set', key, val)
            // console.log('result', result) // true
            return result //? 返回的是bool 是否设置成功
        },
        deleteProperty(target, key) {
            //? 删除目标对象的属性
            const result = Reflect.deleteProperty(target, key)
            console.log('delete property', key)
            // console.log('result', result) // true
            return result // 是否删除成功
        }
    }
    //? 生成代理对象
    return new Proxy(target, proxyConf)
}

//? 测试数据
const data = {
    name: 'zhangsan',
    age: 20,
    info: {
        city: 'shenshen',
        a: {
            b: {
                c: {
                    d: {
                        e: 100
                    }
                }
            }
        }
    }
}

const proxyData = reactive(data)
console.log(proxyData.name);
